<template>
  <div class="leave_comment">
    <div class="block">
      <el-timeline
        v-infinite-scroll="load"
        infinite-scroll-distance="0px"
        :infinite-scroll-immediate="flag"
      >
        <el-timeline-item
          v-for="item in leave_commentList"
          :key="item.id"
          :timestamp="getTime(item.create_time)"
          placement="top"
        >
          <el-card>
            <div class="content">
              <img src="../../assets/img/avatar.jpg" alt="" />
              <h4>{{ item.nick }}</h4>
            </div>
            <p class="elcard-item">{{ item.content }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <p v-if="false === true">加载中~</p>
      <p v-else>没有更多了~</p>
    </div>
    <div class="send_cont">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="desc">
          <el-input
            type="textarea"
            v-model="ruleForm.leave_comment"
            v-model.trim="ruleForm.leave_comment"
            :maxlength="240"
          ></el-input>
          <p class="reside-font">
            你还有{{ 200 - Number(ruleForm.leave_comment.length) }}个字可以写
          </p>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleLeave">发布留言</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
// import { Loading } from "element-ui";
import { formatDate } from "../../util/tool";
import { mapGetters } from "vuex";
import { addleaveMsg, getcomment, getleavemessage } from "../../api/serve";
export default {
  data() {
    return {
      flag: false,
      total: 0,
      page: 1,
      updatelength: "",
      leave_commentList: [],
      ruleForm: {
        leave_comment: "",
      },
    };
  },

  computed: {
    ...mapGetters("user", ["getUser"]),
  },

  mounted() {
    this.init(this.page);
    const { name } = this.$route;
    if (name == "mesboard" && !this.getUser) {
      this.$router.push("/");
    }
    console.log(this.$route);
  },
  methods: {
    load() {
      let allPage = Math.ceil(this.total / 10);
      if (this.page < allPage) {
        // 如果小于总的页数则将自动加载打开，将page+1 请求下一页的数据
        this.flag = true;
        this.page = this.page + 1;
        this.init(this.page);
      }
    },
    getTime(dateStr) {
      return formatDate(dateStr, "YYYY-MM-DD hh:mm:ss");
    },
    // 提交留言内容
    handleLeave() {
      this.$refs["ruleForm"].validate((value) => {
        let user = this.getUser;
        if (value) {
          if (this.ruleForm.leave_comment == "") {
            this.$message({
              message: "请填写内容",
              duration: 2000,
              type: "error",
            });
            return;
          }
          addleaveMsg(
            { content: this.ruleForm.leave_comment, nick: user.email },
            (res) => {
              if (res.success) {
                this.$message({
                  message: "发布成功",
                  duration: 2000,
                  type: "success",
                });
                this.init(this.page);
                this.flag = true;
                this.ruleForm.leave_comment = "";
              }
            }
          );
        }
      });
    },
    init(page) {
      getleavemessage({ page: page }, (res) => {
        this.total = res.total;
        this.leave_commentList = [...this.leave_commentList, ...res.data];
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.leave_comment {
  padding: 25px;
  background: #fff;
  box-shadow: 0 -11px -26px 0 rgb(0 0 0 / 10%);
}
.block {
  overflow: auto;
  height: 700px;
  margin-top: 29px;
}
.reside-font {
  background-image: linear-gradient(
    to right,
    rgb(203, 196, 182),
    rgb(59, 44, 158)
  );
  -webkit-background-clip: text;
  color: transparent;
  font-size: 19px;
}
.content {
  display: flex;
  align-items: center;
  img {
    width: 45px;
    border-radius: 50%;
  }
  h4 {
    margin-left: 5px;
  }
}
.elcard-item {
  margin-top: 15px;
  margin-left: 5px;
}
</style>
